<template>
    <div class="vmethods">
        <h2>methods</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">
            用于存放函数。<br>
            它里面的函数中的this，都指向vue实例，即vm 。<br>
            注意，函数不要使用箭头函数，因为箭头函数没有自己的this，这就导致this指向脱离vm。<br>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            使用方法
        </el-tag>
        <p class="decr">
            在双大括号中使用:<br>
            {{show}}
        </p>
        <p class="decr">
            在事件中使用:<br>
            {{click}}
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

export default {
    name: 'Vmethods',
    mixins: [mixinPage],
    data() {
        return {
            val: 'hello',
            show: '{{sayHello()}}',
            click: `<button @click="sayHello">点击</button>`
        }
    },
    methods: {
        sayHello() {
            console.log(this.val + '!');
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>